import React, { Component } from "react";

class EventDemo extends Component {
  constructor(props) {
    super(props);

    const obj = this;

    // 一、使用bind：让事件处理函数里的this是组件对象本身
    this.handleClick02 = this.handleClick01.bind(obj); // 把handleClick01和obj绑定（绑死）在一起。产生新的函数。新的函数里的this，永远都是bind时传入的obj。
  }

  // 事件处理函数
  handleClick01() {
    console.log("click.this", this);
  }

  // 三、箭头函数
  handleClick03 = () => {
    console.log("click.this", this);
  };

  handleClick04() {
    console.log("click.this", this);
  }

  handleClick05 = (e) => {
    console.log("e", e);
    console.log(e.target); //真正的事件源
    console.log(e.currentTarget); //当前事件源
  };

  handleClick06 = (e, arg1) => {
    console.log("e", e);
    console.log(e.target); //真正的事件源
    console.log(e.currentTarget); //当前事件源
  };

  render() {
    return (
      <>
        <div>事件处理</div>
        <p>事件处理函数里的this</p>
        <input type="button" value="点击01" onClick={this.handleClick02} />
        {/* 二、 使用bind*/}
        <input
          type="button"
          value="点击02"
          onClick={this.handleClick01.bind(this)}
        />

        <input type="button" value="点击03" onClick={this.handleClick03} />

        {/* 四、箭头函数：直接赋值为箭头函数 */}
        <input
          type="button"
          value="点击04"
          onClick={() => {
            this.handleClick04();
          }}
        />

        <hr />
        <p>事件对象的获取</p>
        <input type="button" value="点击05" onClick={this.handleClick05} />
        <input
          type="button"
          value="点击05"
          onClick={(e) => this.handleClick06(e, "hello")}
        />
      </>
    );
  }
}

export default EventDemo;
